﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE>CSS样例文件</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="../webContent/style/content.css"   type="text/css" rel="stylesheet"/>
</HEAD>

<BODY>
<div class="navigation">CSS样例文件</div>
<form  name="form2" action="">
  
  <table>
  	<tr>
 		<td ><font color="red">1.查询条件的TABLE中 class="table_query" 样式包括表格所占宽度比例，背景颜色，表格设置合并边框模型；这里注意的地方是自己不要在 table 中设定背景颜色(样式如下).</font></td>
 		</tr>
 </table>
 <table class="table_query" align="center" >
    <tr>
      <td >查询条件</td>
      <td >查询条件</td>
    </tr>
  </table>
  <table>
  	<tr>
 		<td ><font color="red">2.如果查询条件中的table带线条的，class="table_query_line"(样式如下).</font></td>
 		</tr>
 </table>
  <table class="table_query table_query_line" align="center" >
    <tr>
      <td >带线条查询条件</td>
      <td >带线条查询条件</td>
    </tr>
      <tr>
      <td >带线条查询条件</td>
      <td >带线条查询条件</td>
    </tr>
  </table>
 <table>
 		<tr>
 		<td ><font color="red">3.查询条件中td属性中N列N字，包括颜色，宽度，对齐方式。从上到下一依次为2列2，3，4，5，6字显示样式从上至下。代码为class="table_query_2Col_label_2Letter" Letter由2-6.(td中样式)</font></td>
 		</tr>
  </table>
  <table class="table_query" align="center" >
   	<tr>
      <td class="table_query_2Col_label_2Letter" >查询</td>
      <td class="table_query_2Col_label_2Letter">查询</td>
    </tr>
     	<tr>
      <td class="table_query_2Col_label_3Letter" >查询1</td>
      <td class="table_query_2Col_label_3Letter">查询1</td>
    </tr>
    <tr>
      <td class="table_query_2Col_label_4Letter" >查询条件</td>
      <td class="table_query_2Col_label_4Letter">查询条件</td>
    </tr>
    <tr>
      <td class="table_query_2Col_label_5Letter" >查询条件1</td>
      <td class="table_query_2Col_label_5Letter">查询条件1</td>
    </tr>
     	<tr>
      <td class="table_query_2Col_label_6Letter" >增加查询条件</td>
      <td class="table_query_2Col_label_6Letter">增加查询条件</td>
    </tr>
  </table>
   <table>
 		<tr>
 		<td ><font color="red">4.除了2列2-6字还有3列2-6字、4列2-6字，显示样式与上面类似；在新增页面中,table中样式代码为class="table_add",td中样式代码为class="table_add_2Col_label_2Letter".</font></td>
 		</tr>
  </table>
   <table class="table_add" align="center" >
    <tr>
      <td class="table_add_2Col_label_2Letter">新增</td>
      <td class="table_add_2Col_label_2Letter">新增</td>
    </tr>
  </table>
   <table>
 		<tr>
 		<td ><font color="red">5.在修改页面中,table中class="table_edit",td中class="table_edit_2Col_label_2Letter".</font></td>
 		</tr>
  </table> 
   <table class="table_edit" align="center" >
   <tr>
     <td class="table_edit_2Col_label_2Letter">修改</td>
     <td class="table_edit_2Col_label_2Letter">修改</td>
   </tr>
  </table>
  <table>
 		<tr>
 		<td ><font color="red">6.在查询结果页面中,table中class="table_list",注意标题行要用TH不用TD，不需要引用CSS;查询数据中奇行时TR中class="table_list_row1";偶行数时R中class="table_list_row2";已josn实现的不需引用CSS.</font></td>
 		</tr>
  </table> 
  <table class="table_list" align="center" >
   <tr>
     <th >查询标题</th>
     <th >查询标题</th>
   </tr>
    <tr class="table_list_row1">
     <td >查询结果颜色1</td>
     <td >查询结果颜色1</td>
   </tr>
     <tr class="table_list_row2">
     <td >查询结果颜色2</td>
     <td >查询结果颜色2</td>
   </tr>
  </table>
  <table>
 		<tr>
 		<td ><font color="red">7.input输入框类型</font></td>
 		</tr>
  </table>
  <table class="table_query" align="center">
 		<tr>
 		<td >最短input 中class="mini_txt"----></td><td ><input type="text" name="textfield" class="mini_txt" /></td>
<td>稍微长些input 中class="short_txt"----></td> <td><input type="text" name="textfield" class="short_txt" /></td>
 	  </tr>
 
 	  <tr>
 		<td >中间长度class="middle_txt"----></td><td ><input type="text" name="textfield" class="middle_txt" /></td><td>超长input 中class="short_txt"----></td> <td><input type="text" name="textfield" class="long_txt" /></td>
 	 </tr> 
 	 <tr> 		
 	 	<td >没有边框input 中class="no_border"----></td><td ><input type="text" name="textfield" class="no_border" /></td><td>只有底线input 中class="bottom_line"----></td> <td><input type="text" name="textfield" class="bottom_line" /></td>
 		</tr>
  </table>
    <table>
 		<tr>
 		<td ><font color="red">8.下拉框类型</font></td>
 		</tr>
  </table>
   <table class="table_query" align="center">
    <tr>
   <td>短select样式 class="min_sel"
  <select name="select1" class="min_sel">
    <option>18</option>
    <option>19</option>
    <option>20</option>
    <option>21</option>
 </select>  
</td>
   <td>中select样式 class="short_sel"
  <select name="select4" class="short_sel">
    <option>18</option>
    <option>19</option>
    <option>20</option>
    <option>21</option>
 </select>  
</td>
  <td>长select样式 class="short_sel"
  <select name="select2" class="long_sel">
    <option>18</option>
    <option>19</option>
    <option>20</option>
    <option>21</option>
 </select>  
</td>
</tr>
</table>
  <table>
 		<tr>
 		<td ><font color="red">9.按钮类型</font></td>
 		</tr>
  </table>
   <table class="table_query" align="center">
 	<tr>
 		<td>常用button class="normal_btn"----><input name="button1" type="button" class="normal_btn" value="按钮1" /></td> 
 		<td>长button class="long_btn"----><input name="button2" type="button" class="long_btn" value="按钮2" /></td>  
 	</tr>
</table>
 <table>
 		<tr>
 		<td ><font color="red">10.导航中样式,导航中 div class="navigation"</font></td>
 		</tr>
  </table>
 <div class="navigation">导航样例</div>
</form>
</BODY>
</HTML>
